<template>
  <div>
    <div class="title">
      自定义选项值
    </div>

  <el-form>
    <el-form-item label="活动名称">
      <el-input class="input" v-model="name"></el-input>
    </el-form-item>
  </el-form>

    <span>已有选项值:</span>
    <div class="kind" v-for="(item,index) in kinds" :key="index">
      {{item.contract_part_name}} <span v-if="item.contract_part_name" class="X"> X</span>
    </div>

  <el-form>
    <el-button @click="success" class="btn" type="primary">提交</el-button>
  </el-form>

  </div>
</template>

<script>
import { addkinds } from '../../http/apis/agreementApi'
export default {
    data(){
      return{
        name:'',
        kinds:[],
        value:0,
        kind:[]
      }
    },


    created(){
      addkinds(this.name)
      .then((res)=>{
        console.log('请求成功',res);
        // for(let a = 0;a < res.data.data.length;a++){
        //   if(res.data.data.contract_part_name){
        //   this.kind.push(res.data.data[a].contract_part_name)
        //   console.log(this.kind);
        // }
        // }
        // console.log(this.kind);
        this.success()
        this.kinds = res.data.data
        // console.log(this.kinds[0].contract_part_name);
      })
      .catch((err)=>{
        console.log('请求失败',err);
      })
    },

    methods:{
      success(){
        console.log("success");
        // console.log(this.kinds);
        for( let a = 0;a < this.kinds.length;a++ ){
          if( this.kinds[a].contract_part_name){
            this.kind.push(this.kinds[a].contract_part_name)
          }
        }
        console.log(this.kind);
        // this.$router.back()
      }
    }  

}
</script>

<style>
.title{
  font-size: 18px;
  padding: 10px;
  box-sizing: border-box;
  font-weight: 700;
}
.input{
  width: 350px;
}
.btn{
  margin-left: 230px;
  margin-top: 10px;
}
.kind{
  padding-left: 250px;
  margin-top: 10px;
  box-sizing: border-box;
}
.X{
  color: red;
  cursor: pointer;
}
</style>